import * as echarts from 'echarts';
// import{ getDateRangeString } from '@/utils/func/util'
export function getOptionsForRankBar(xData, yData, yLabel){
  var option = {
    grid: {
        left: '5%',
        right: '8%',
        bottom: '5%',
        top: '10%',
        containLabel: true,
    },
    legend: {//图例组件，颜色和名字
      right: 10,
      top: 15,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
        textStyle: {
          color: '#fff',
          opacity:'0.6',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12,            
      }
  },    
    tooltip: {
        show: false,
        trigger: "item",
        backgroundColor:"rgba(0,0,0,0)",
        borderColor:"rgba(0,0,0,0)",
        triggerOn: "mousemove",
        enterable:true,
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)',
        padding:[0],
        textStyle: {
          color: '#fff', // 文本颜色
          fontSize: 24, // 文本大小
          fontWeight: 500,
        },
         formatter: "<span style='font-size:16px;'>{c}次</span>",
    },
    // backgroundColor: '#031d33',
    xAxis: {
        show: true,
        type: 'value',
        // data:xData
        splitNumber: 7,
        axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                fontSize: 15,
                // fontWeight: 'bolder'
            },
            formatter: function (value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(1).replace(/(\.0+$)/, "")+'w'; 
            } else {
                return value.toLocaleString()
            }
            }
        },
        axisLine: {
            show: true, // X轴 网格线 颜色类型的修改
            lineStyle: {
                type: 'solid',
                opacity: '0.15',
                color: 'rgba(255,255,255,1)'
            },
        },
        splitLine: {
            show: true, // X轴线 颜色类型的修改
            lineStyle: {
                type: 'solid',
                color: 'rgba(77, 128, 254, 0.2)',
            },
        },
    },
    yAxis: [
        {
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                margin: 25,
                textStyle: {
                    color: '#fff',
                    fontSize: '15',
                    fontWeight: 'bolder',
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
              show: true, // Y轴 网格线 颜色类型的修改
              lineStyle: {
                  type: 'solid',
                  opacity: '0.15',
                  color: 'rgba(255,255,255,1)'
              },
            },           
            data: yLabel,
        },
    ],
    series: [
        {
            name: '上周应用活跃量',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 1,
                            color: '#F39348',
                        },
                        {
                            offset: 0,
                            color: '#FFD042',
                        },
                    ]),
                },
            },
            barWidth: 30,
            data: yData,
            label: {// 右侧label数字
              normal: {
                  show: true,
                  position: 'right',
                  formatter: function(params) { return params.value.toLocaleString()},
                  color:'#fff',
                  fontSize:'15px'
              }
          }, 
        }
    ],
}
  return option;

}
/**
 * 应用启动趋势
 * @param {Array} xData 
 * @param {Array} yData 
 * @param {Number} currentTab  1 昨日 2 近7日 3 近30日
 * @returns 
 */
export function getOptionsForLineBottom(xData, yData, currentTab) {
  var option = {
    tooltip: {
      trigger: 'item',
      confine: false,
      alwysShowContent: false,
      backgroundColor:"rgba(0,0,0,0)",
      borderColor:"rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable:true,
      // 去掉阴影
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding:[0],
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const titleBoxWidth = (document.querySelector('.puple-common-tip').offsetWidth)*0.7
        const pointX = point[0]-titleBoxWidth
        const pointY = point[1]-9
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX
        } else {
          // 默认紧贴光标右侧显示
          x = pointX
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
          // window.tooltipLineSpace = true
        } else {
          // window.tooltipLineSpace = false
          // 默认紧贴光标上方显示
          y = pointY - 110
        }
        return [x, y]
      },
      formatter: (params) => {
         console.log(JSON.stringify(currentTab))
      //  ${currentTab=='1' ? `<p>${getDateRangeString().yesterday}</p>` : ``}
      //  ${currentTab=='2' ? `<p>${getDateRangeString().lastSevenDays.split('～')[0]}～</p><p>${getDateRangeString().lastSevenDays.split('～')[1]}</p>` : ``}
      //  ${currentTab=='3' ? `<p>${getDateRangeString().lastThirtyDays.split('～')[0]}～</p><p>${getDateRangeString().lastThirtyDays.split('～')[1]}</p>` : ``}
      // <p>${currentTab=='1'?(getDateRangeString().yesterday) : currentTab=='2' ? (getDateRangeString().lastSevenDays) : (getDateRangeString().lastThirtyDays)}</p>
        return `<div class="puple-common-tip">
                <div class="title">${params.name}</div> 
                <p><span class="total-box">${params.value ? params.value.toLocaleString():''}</span>次</p>
              <div>`
      }
  },
  grid: {
    top: '15%',
    left: '5%',  // 设置左边距，根据实际情况调整
    right: '3%', // 设置右边距
    bottom: '5%', // 设置底部距离
    containLabel: true // 包含标签，确保标签不会被裁剪
  },
  xAxis: [{
      type: 'category',
      boundaryGap: false,
      // axisLine: { //坐标轴轴线相关设置。数学上的x轴
      //     show: false,
      //     lineStyle: {
      //         color: '#233653'
      //     },
      // },
      axisLabel: { //x坐标轴设置
        interval: currentTab == 3 ? 1 : 0, // 每隔两个标签显示一次
          rotate: ( currentTab== 2 ||currentTab== 3) ? 45 : 0,
          textStyle: {
              color: '#fff', 
              padding: 16,
              fontSize: 15
          },
          formatter: function(data) {
              return data
          }
      },
      splitLine: {
          show: false,
          lineStyle: {
              color: '#276CC9'
          },
      },
      axisTick: {
          show: false,
      },
      data: xData
  }],
  yAxis: [{
    min: 0,
    splitLine: {
        show: true,
        lineStyle: {
            color: '#233653' //网格线颜色
        },
    },
    axisLine: {
        show: false,
        lineStyle: {
            color: "#233653"
        }
    },
    axisLabel: {
        show: true,
        textStyle: {
            color: '#fff', //y轴设置
            padding: 16,
            fontSize: 15
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toFixed(1).replace(/(\.0+$)/, "")+'w'; 
        } else {
            return value.toLocaleString()
        }
        }
    },
    axisTick: {
        show: false,
    },
  }], 
    series: [
    {
        name: '近7日',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize:14,
        // smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "rgba(72,160,243,1)", // 线条颜色
            },
        },
        itemStyle: {
            color: "rgba(72,160,243,1)",
        },
        areaStyle:{
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(39,108,201,0.4)"
                    },
                    {
                        offset: 1,
                        color: "rgba(72,160,243,1)"
                    }
                ], false),
            }
        },
        data: yData
    }    
    ]
  };
  return option;
}
